<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>新增储值规则</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.trim="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="储值规则名称" prop="name" :required="true">
                    <el-input v-model.trim="form.name" autocomplete="off" placeholder="请输入储值名称"></el-input>
                </el-form-item>
                <el-form-item label="储值金额" prop="money" :required="true" class="numberInput">
                    <el-input-number v-model="form.money" placeholder="请输入储值金额" class="moneeyIpnut"
                                     controls-position="right" :min="0.01" :max="99999999"></el-input-number>
                    <span class="mar_lr10">元</span>
                    <!--                    <div class="flex flex-y-top">-->
                    <!--                        <div class="flex-g-0">-->
                    <!--                            <el-input-number v-model="form.money" class="moneeyIpnut" controls-position="right"-->
                    <!--                                             @change="handleChange" :min="1" :max="99999999">-->
                    <!--                            </el-input-number>-->
                    <!--                        </div>-->
                    <!--                        <div class="flex-g-1 ">-->
                    <!--                            <div class="t_l">-->
                    <!--                                <span class="mar_lr10">送</span>-->
                    <!--                                <el-input-number v-model="giveMoney" controls-position="right" @change="handleChange"-->
                    <!--                                                 :min="0" :max="99999999" class=""></el-input-number>-->
                    <!--                                <span class="mar_l10">元</span>-->
                    <!--                            </div>-->
                    <!--                            <div class="mar_t10 t_l">-->
                    <!--                                <span class="mar_lr10">送</span>-->
                    <!--                                <el-input-number v-model="integral" controls-position="right" @change="handleChange"-->
                    <!--                                                 :min="0" :max="99999999" class=""></el-input-number>-->
                    <!--                                <span class="mar_l10">积分</span>-->
                    <!--                            </div>-->
                    <!--                            <div class="mar_t10">-->
                    <!--                                <span class="mar_lr10">送</span>-->
                    <!--                                <el-select v-model="comgroupingVal" multiple filterable  placeholder="请选择优惠券">-->
                    <!--                                    <el-option  v-for="item in comgrouping" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
                    <!--                                </el-select>-->
                    <!--                                <span class="mar_l10">优惠券</span>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->

                    <!--                    <div class="coupon">-->
                    <!--                        <el-button plain type="size" class="mar_l10">选择优惠券</el-button>-->
                    <!--                        <el-table :data="tableData2" border style="width: 430px" class="mar_t10">-->
                    <!--                            <el-table-column prop="name" label="优惠券名称"></el-table-column>-->
                    <!--                            <el-table-column label="操作">-->
                    <!--                                <template slot-scope="scope">-->
                    <!--                                    <el-button type="button" @click="open1(scope.row,scope.$index)"-->
                    <!--                                               class="el-button&#45;&#45;text color_rb">删除-->
                    <!--                                    </el-button>-->
                    <!--                                </template>-->
                    <!--                            </el-table-column>-->
                    <!--                        </el-table>-->
                    <!--                    </div>-->
                </el-form-item>
                <el-form-item label="优惠活动" prop="username">
                    <div class="">
                        <div class="t_l numberInput">
                            <div class="mar_lr10">
                                <el-checkbox-group v-model="form.moneyOpen">
                                    <el-checkbox true-label="1" false-label="2">赠送余额</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div v-show="form.moneyOpen=='1'">
                                <el-input-number v-model="form.giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                 class=""></el-input-number>
                                <span class="mar_l10">元</span>
                            </div>
                        </div>
                        <div class="t_l numberInput">
                            <div class="mar_lr10">
                                <el-checkbox-group v-model="form.integralOpen">
                                    <el-checkbox  true-label="1" false-label="2">赠送积分</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div v-show="form.integralOpen=='1'">
                                <el-input-number v-model="form.integral" controls-position="right" :min="1" :max="99999999"
                                                 class=""></el-input-number>
                                <span class="mar_l10">积分</span>
                            </div>
                        </div>
                        <div class="t_l numberInput">
                            <div class="mar_lr10">
                                <el-checkbox-group v-model="form.growOpen">
                                    <el-checkbox  true-label="1" false-label="2">赠送成长值</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div v-show="form.growOpen=='1'">
                                <el-input-number v-model="form.giveGrow" controls-position="right" :min="1" :max="99999999"
                                                 class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                            </div>
                        </div>
                        <div class="">
                            <div class="mar_lr10">
                                <el-checkbox-group v-model="form.couponOpen">
                                    <el-checkbox  true-label="1" false-label="2">赠送优惠券</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div v-show="form.couponOpen=='1'" class="flex">
                                <el-select v-model="form.couponId" multiple filterable placeholder="请选择优惠券">
                                    <el-option v-for="item in comgrouping" :key="item.id" :label="item.name"
                                               :value="item.id"></el-option>
                                </el-select>
<!--                                <div class="numberInput">-->
<!--                                    <el-input-number v-model="form.money" class="moneeyIpnut mar_l10"-->
<!--                                                     controls-position="right" :min="1"-->
<!--                                                     :max="99999999"></el-input-number>-->
<!--                                </div>-->
<!--                                <span class="mar_l10">张</span>-->
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {getDepositSave,postDepositSave,getSelectCoupon} from "@/api/user";
    export default {
        name: "goodlistadd",
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
            this.getSelectCoupon()
        },
        data() {
            return {
                form: {
                    sort: '1',
                    name: "",
                    money: "",
                    moneyOpen: "2",
                    integralOpen: "2",
                    couponOpen: "2",
                    growOpen: "2",
                    giveMoney: "",
                    giveGrow: "",
                    integral: "",
                    couponId: [],
                },
                comgrouping: [],
            }
        },
        components: {},
        methods: {
            async getSelectCoupon(){
                const {data} = await getSelectCoupon()
                this.comgrouping = data?data:[]
            },
            async edit(){
                const {data} = await getDepositSave({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        const {msg} = await postDepositSave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.push({path: 'valuerule'})
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
